<!-- 操作日志 -->
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-space>
                    <el-input class="fix_input" v-model.trim="inputId" placeholder="请输入管理ID" clearable />
                    <el-button :icon="Search" type="primary" @click="searchId()">查找</el-button>
                </el-space>
            </el-header>
            <el-main>
                <div class="el-scrollbar__wrap metaBox">
                    <el-backtop :bottom="100" ref="backTop" :visibility-height="5" target=".metaBox .el-scrollbar__wrap" />
                    <el-table :data="tableData" border style="width: 100%;height: 100%;" class="scrollbar-demo-item">
                        <el-table-column prop="id" label="日志ID" />
                        <el-table-column prop="adminId" label="管理员ID" />
                        <el-table-column prop="requestId" label="请求ID" />
                        <el-table-column prop="group" label="API分组" />
                        <el-table-column prop="method" label="API方法" />
                        <el-table-column prop="gmtCreate" label="操作时间">
                            <!-- 时间转换 -->
                            <template #default="scope">
                                {{ traversalTime(scope.row.gmtCreate) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
            <el-footer>
                <Paging v-bind="pagination" @page-change="pageChange" />
            </el-footer>
        </el-container>
    </div>
</template>
  
<script lang="ts" setup>
import { post } from '@/utils/http';
import { nextTick, onMounted, reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import Paging from '@/components/paging/Paging.vue'
import { traversalTime } from '@/utils/ProcessingTime'
import { ClassPagination } from '#/index';

const inputId = ref('')
const backTop = ref()

const pagination = reactive(new ClassPagination())

//子传父的自定义事件
function pageChange(e: TypePage) {
    pagination.page = e.page
    pagination.limit = e.limit
    init()
}

/**
 * 获取初始化数据，用于渲染页面
 */
function init() {
    const { page, limit } = pagination
    // 接口需要的数据data
    let data = {
        _gp: 'admin.log',
        _mt: 'list',
        limit,
        page,
        targetAdminId: inputId.value
    }
    post(data).then(res => {

        let { data: { total, items },errno } = res
        if (200 === errno) {
            pagination.total = total
            tableData.length = 0;
            tableData.push(...items)

            nextTick(() => {
                backTop.value.$el.click?.()
            })
        }
    }).catch(err => {
        console.log(err);
    })
}

onMounted(() => {
    init()
})

/**
 * 根据输入内容搜索
 */
function searchId() {
    init()
}

let tableData: TypeLog[] = reactive([])

</script>
  

<style scoped lang="less">
.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    //   border-radius: 4px;
}

.metaBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
}

.fix_input {
    width: 200px;
}
</style>